<html>
	<head>
      	<!-- Bootstrap Framework script -->		
		<link href="css/bootstrap.css" rel="stylesheet"/>
      	<script src="js/jquery.js"></script>
     	<script src="js/bootstrap.js"></script>
		<style>
		      body {
		      	background-image: 
		        padding-top: 40px;
		        padding-bottom: 40px;
		        background-color: #f5f5f5;
		      }
		      .form-signin {
		        max-width: 300px;
		        padding: 19px 29px 29px;
		        margin: 0 auto 20px;
		        background-color: #fff;
		        border: 1px solid #e5e5e5;
		        -webkit-border-radius: 5px;
		           -moz-border-radius: 5px;
		                border-radius: 5px;
		        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
		           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
		                box-shadow: 0 1px 2px rgba(0,0,0,.05);
		      }
		      .form-signin .form-signin-heading,
		      .form-signin .checkbox {
		        margin-bottom: 10px;
		      }
		      .form-signin input[type="text"],
		      .form-signin input[type="password"] {
		        font-size: 16px;
		        height: auto;
		        margin-bottom: 15px;
		        padding: 7px 9px;
		      }

.hero-unit {
	background-color: #f5f5f5;
}




		</style>      
	</head>
	<body>
	
	<div class = "container">
		
		<div class="row">
                <div class="span8 offset2">
                    <div class="hero-unit">
                        <center><h1></h1>
                        <br><br><br></center>
                    </div>
                </div> 



		<div class="span4 offset4">
                   
            <form class="well">
                        
                <fieldset>
					<h2 class="form-signin-heading">Ingresa tus datos</h2>
					<input name='user' id='user' type='text' class='input-block-level' placeholder='Usuario'/>
					<input name='password' id='password' type='password' class='input-block-level' placeholder='Contrase&ntilde;a'/>
				<button id ='enter' type='button' onClick ="login()" onkeypress = "enter()" class='btn btn-large btn-primary'>Entrar</button>  
					
				</fieldset>

            </form>

    		<div class="alert" id = "alert" style ="display:inline-block; visibility: hidden">
    	
    			<strong>ERROR!</strong> Datos incorrectos.
    		</div>

    	</div>
		
	</div>

	</div> <!-- /span -->
            
	

	</body>

	<script>
		$(window).keyup(function(event){
    		if(event.keyCode == 13){
       	 		$("#enter").click();
   			 }
		});

		function login(){
			var xmlhttp;
			var params = "";

			var user = document.getElementById("user").value;
			var password = document.getElementById("password").value;


			params = "user="+user+"&password="+password;
            
            if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
               xmlhttp=new XMLHttpRequest();
            }
            else{// code for IE6, IE5
               xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange=function(){
            
               if (xmlhttp.readyState==4 && xmlhttp.status==200){

                 var resp = xmlhttp.responseText;
				 
				 resp = resp.substring(0, 2);

                 if( resp == "ok"){

                 	location.href = './project_creation.php';
                 }else{

					document.getElementById("alert").style.visibility = 'visible';
                 }
               }
            }

            xmlhttp.open("POST","php/login.php",true);

			xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			xmlhttp.setRequestHeader("Content-length", params.length);
			xmlhttp.setRequestHeader("Connection", "close");

            xmlhttp.send(params);
        }

 
	</script>



</html>